<template>
  <div>
    <div class="header">
      <span>{{ title }}</span>
      <svg t="1667895292496" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2547" width="15" height="15"><path d="M512 73.136C269.632 73.136 73.136 269.616 73.136 512c0 242.368 196.48 438.864 438.864 438.864 242.368 0 438.864-196.48 438.864-438.864 0-242.368-196.48-438.864-438.864-438.864zM512 0c282.768 0 512 229.232 512 512 0 282.768-229.232 512-512 512C229.232 1024 0 794.768 0 512 0 229.232 229.232 0 512 0z m-36.576 512a36.576 36.576 0 0 1 73.152 0v219.424a36.576 36.576 0 0 1-73.152 0V512z m0-204.8a36.576 36.576 0 0 1 73.152 0v43.904a36.576 36.576 0 0 1-73.152 0v-43.92z" p-id="2548" /></svg>
    </div>
    <div class="content">{{ count }}</div>
    <div class="charts">
      <!-- 加入插槽 -->
      <slot name="charts" />
    </div>
    <div class="footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '头部'
    },
    count: {
      type: String,
      default: '0'
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
    display: flex;
    justify-content: space-between;
}

.content{
    font-size: 30px;
    padding: 10px 0;
}

.charts{
    font-size: 15px;
    height: 50px;
}

.footer{
    border-top: 1px solid #d9d9d9;
    padding-top: 10px;
}
</style>

